import * as THREE from 'three';
import { getFont, getScreenX, getScreenY, getPaddingTop } from './utils'

export default class textLabel extends THREE.Sprite {
  constructor(
    txt = 'Label',
    x = 0,
    y = 0,
    color = '#fff',
    fontSize = 24,
    bold = false,
    shadow = false
  ) {
    super()
    this.x = x
    this.y = y + getPaddingTop()
    this.width = 0
    this.height = 0
    this.txt = txt
    this.color = color
    this.fontSize = fontSize
    this.bold = bold
    this.shadow = shadow
    this.radio = window.devicePixelRatio / 2
    // 设置原点默认是0 1 中心点0.5 0.5 用于控制Label范围rect
    this.origin = new THREE.Vector2(0, 1)
    this.initCanvas()
    this.resetMaterial()
    this.drawCanvas()
    this.setPosition(x, y)
  }

  initCanvas() {
    this.canvas = wx.createCanvas()
    this.ctx = this.canvas.getContext('2d')
    this.caclLabelSize()
    this.canvas.width = this.width * this.radio
    this.canvas.height = this.height * this.radio
  }

  resetCanvas() {
    this.caclLabelSize()
    this.canvas.width = this.width * this.radio
    this.canvas.height = this.height * this.radio
  }

  resetMaterial() {
    this.texture = new THREE.CanvasTexture(this.canvas)
    this.texture.minFilter = this.texture.magFilter = THREE.LinearFilter
    this.material.map = this.texture
  }

  drawCanvas() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    // this.ctx.strokeStyle = '#FF0000'
    // this.ctx.strokeRect(0, 0, this.canvas.width, this.canvas.height)
    this.ctx.font = getFont(this.fontSize * this.radio, this.bold)
    this.ctx.fillStyle = this.color
    if (this.shadow) {
      this.ctx.shadowColor = '#000000'
      this.ctx.shadowBlur = 10
    }
    this.ctx.textBaseline = 'top'
    this.ctx.fillText(this.txt, 0, 0)
    this.texture.needsUpdate = true
  }

  setTxt(txt) {
    this.txt = txt
    this.resetCanvas()
    this.drawCanvas()
  }

  setPosition(x, y) {
    let center = this.getCenterPoint(x, y)
    let p = this.convertToScenePosition(center.x, center.y)
    this.scale.set(getScreenX(this.width), getScreenY(this.height), 1)
    this.position.set(p.x, p.y, 1)
  }

  setOriginPoint(x, y) {
    // 设置原点默认是0 1 中心点0.5 0.5
    // 用于控制精灵范围rect
    this.origin = new THREE.Vector2(x, y)
    this.setPosition(this.x, this.y)
  }

  setCenterPoint(x, y) {
    // 设置锚点默认是0.5 05 中心点0.5 0.5
    // 用于控制精灵变换参照点
    this.center = new THREE.Vector2(x, y)
    this.setPosition(this.x, this.y)
  }

  getCenterPoint() {
    let p = {
      x: this.x + (0.5 - this.origin.x) * this.width,
      y: this.y + (this.origin.y - 0.5) * this.height,
    }
    return {
      x: p.x + (0.5 - this.center.x) * this.width,
      y: p.y + (0.5 - this.center.y) * this.height,
    }
  }

  // 返回设计稿范围
  getRect() {
    return {
      top: this.y - (1 - this.origin.y) * this.height,
      left: this.x - this.origin.x * this.width,
      right: this.x + (1 - this.origin.x) * this.width,
      bottom: this.y + this.origin.y * this.height,
    }
  }

  // 传入设计稿(x:0, y:0)坐标，左上角为0,0，返回UI场景中坐标
  convertToScenePosition(x, y) {
    x = getScreenX(x)
    y = getScreenY(y)
    let displayPos = {
      x: (x / window.Scene.w) * 2 - 1,
      y: -(y / window.Scene.h) * 2 + 1,
    }
    let vector = new THREE.Vector3(displayPos.x, displayPos.y, 1)
    vector.unproject(window.Scene.camera.uiCamera)
    return vector
  }

  caclLabelSize() {
    this.ctx.font = getFont(this.fontSize, this.bold)
    this.ctx.fillStyle = this.color
    this.ctx.textBaseline = 'top'
    this.width = this.ctx.measureText(this.txt).width + 5
    this.height = this.fontSize
  }
}
